<template>
  <div class="layout">
    <Layout>
      <Header>
        <Menu mode="horizontal" active-name="1">
          <div class="layout-logo">
           
          </div>
          <div class="layout-right">
            <Dropdown>
                <a href="javascript:void(0)">
                    {{username.user_name}}
                </a>
                <DropdownMenu slot="list">
                    <DropdownItem>个人中心</DropdownItem>
                    <DropdownItem>我的</DropdownItem>
                    <DropdownItem>设置</DropdownItem>
                    <DropdownItem divided><p @click="outLogin">退出登录</p></DropdownItem>
                </DropdownMenu>
            </Dropdown>
          </div>
        </Menu>
      </Header>
      <Layout>
        <Sider hide-trigger :style="{background: '#000'}">
          <Menu active-name="1-1" theme="light" width="auto" :open-names="['1']">
            <Submenu v-for="(item,index) in authList[0].children" :name="(index+1)+''" :key="index" style="background:#000;color:#fff">
              <template slot="title">
                <Icon type="ios-navigate"></Icon>{{item.title}}
              </template>
             <MenuItem v-for="(ite,inde) in item.children" :key="inde" :name="(index+1)+'-'+(inde+1)" ><router-link tag='span' class='sp' :to="ite.path">{{ite.title}}</router-link></MenuItem>
            </Submenu>
          </Menu>
        </Sider>
        <Layout :style="{padding: '0 24px 24px'}">
          <Breadcrumb :style="{margin: '24px 0'}">
            <BreadcrumbItem v-for='(item,index) in newRouter' :key="index">{{item}}</BreadcrumbItem>
          </Breadcrumb>
          <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
            <router-view></router-view>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import {mapState} from 'vuex'
export default {
  data(){
    return {
      username:JSON.parse(sessionStorage.getItem('userInfo')),
      newRouter:this.$route.path.slice(1).split('/')
    }
  },
  methods: {
    outLogin(){
      Cookies.remove('token');
      sessionStorage.removeItem('userInfo');
      this.$router.push('/login')
    }
  },
  computed: {
    ...mapState('AuthList',['authList'])
  },
  watch: {
    deep:true,
    '$route.path':function(n){
      console.log(n)
      this.newRouter=n.slice(1).split('/')
    }
  },
};
</script>

<style scoped>
.layout {
  height: 100%;
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-logo {
  width: 200px;
  height: 50px;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
  background-image: url('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3826381701,3826643711&fm=26&gp=0.jpg');
}
.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
}
.ivu-layout{
  height: 100%;
}
.ivu-layout-header {
  background: #fff;
}
.ivu-menu-horizontal.ivu-menu-light:after{
  height: 0;
}
.layout-right{
  position: absolute;
  right: 100px;
}

li.ivu-menu-item{
  background: #000 !important;
  color: #eee;
}
.sp{
  display: inline-block;
  width: 100%;
  height: 100%;
}
</style>